<template>
  <div
    @click="handleClick"
    class="hui-image"
    :class="[
      { 'hui-image--flex': flex },
      { 'hui-image--border': border }
    ]"
    :style="{
      'width': width || size,
      'height': height || size,
      'border-radius': borderRadius
    }"
    v-lazy:background-image="mode === 'background-image' && src ? src : ''">
    <img v-lazy="src" v-if="mode === 'img' && src">
    <h-icon size="24px" icon="icon-imagebrokenvariant" v-if="(mode === 'background-image' && src === '') || !src"></h-icon>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'h-image',
  componentName: 'h-image',
  props: {
    mode: {
      type: String,
      default: 'img',
      validator (value) {
        return [
          'img',
          'background-image'
        ].indexOf(value) > -1
      }
    },
    src: String,
    flex: Boolean,
    width: String,
    height: String,
    size: String,
    borderRadius: String,
    border: Boolean
    // border: {
    //   type: String,
    //   validator (value) {
    //     return [
    //       'light',
    //       'dark'
    //     ].indexOf(value) > -1
    //   }
    // }
  },
  methods: {
    handleClick (evt) {
      this.$emit('click', evt)
    }
  }
}
</script>

<style lang="less">
  @import "../h-theme/_variable";

  .hui-image {
    flex: none;
    position: relative;
    display: inline-flex;
    width: 100%;
    height: 100%;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: @--background-color-base;//#F5F5F5;
    color: @--color-text-placeholder;
    transition: @--all-transition;
    vertical-align: middle;
    overflow: hidden;

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
  }

  .hui-image--flex {
    display: flex;
  }

  .hui-image--border {
    border: @--border-base;
  }

  img[lazy=loading] {
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  img[lazy=loaded] {
    transition: @--all-transition;
  }
</style>
